<template>
	<view class="content login-page bg-white">
		<cu-custom bgColor="" :isBack="true"></cu-custom>
		<view  class='steps'>
			<view class="step-one pub">
				<view class="s-o-num" :style="{'opacity':showSteps ? '0.5' : '1'}">1</view>
				<view class="s-o-title" :style="{'opacity' :showSteps ? '0.5' : '1'}">找回密码</view>
			</view>
			<view class="bridge"></view>
			<view class="step-two pub">
				<view class="s-o-num" :style="{'opacity':!showSteps ? '0.5' : '1'}">2</view>
				<view class="s-o-title" :style="{'opacity':!showSteps ? '0.5' : '1'}">重置密码</view>
			</view>
		</view>
		<view class="input-group" :style="{'top': inputBoxTop + 'px' }" v-if="!showSteps">
			<view class="i-g-phone in-box">
				<m-input type="number" clearable v-model="params.mobile" placeholder="手机号码" :icon="'../../static/img/o-iphone.png'" :maxLength="11" :focus="true"></m-input>
			</view>
			<view class='i-g-imgcode in-box'>
				<m-input ref="imageCode" type="number" clearable v-model="params.imgcode" :icon="'../../static/img/o-password.png'" placeholder="图形验证码" :maxLength="4"
				 :imageCode="true"></m-input>
			</view>
			<view class="i-g-phonecode in-box">
				<m-input type="number" clearable v-model="params.code" :icon="'../../static/img/o-password.png'" placeholder="手机验证码" :maxLength="6">
					<button size="mini" class="text-orange text-style" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
				</m-input>
			</view>
			<button type="primary" class="primary round" @tap="checkInfo" :loading="submitBtnDis">下一步</button>
		</view>
		<view class="input-group" :style="{top: inputBoxTop + 'px' }" v-if="showSteps">
			<view class="i-g-newpass in-box">
				<m-input type="password" clearable v-model="params.password" placeholder="重置密码" :icon="'../../static/img/o-password.png'" :maxLength="20" :focus="true"></m-input>
			</view>
			<view class="i-g-newpassok in-box">
				<m-input type="password" clearable v-model="params.rePassword" placeholder="确认密码" :icon="'../../static/img/o-password.png'" :maxLength="20"></m-input>
			</view>
			<button type="primary" class="primary round" @tap="reset" :loading="submitBtnDis">确认</button>
		</view>
		<!-- <view class="padding bg-white">
			<view class="cu-steps">
				<view class="cu-item" :class="index>basics?'':'text-orange'" v-for="(item,index) in basicsList" :key="index">
					<text :class="'cuIcon-' + item.cuIcon"></text> <span class='step-text'>{{item.name}}</span>
				</view>
			</view>
		</view>
		<view class="input-group" v-if='basics == 0'>
			<image src="/static/img/forgetPsw.png" mode="widthFix"></image>
			<m-input type="number" clearable v-model="params.mobile" placeholder="手机号码" :maxLength="11" :focus="true"></m-input>
			<m-input ref="imageCode" type="number" clearable v-model="params.imgcode" placeholder="图形验证码" :maxLength="4"
			 :imageCode="true"></m-input>
			<m-input type="number" clearable v-model="params.code" placeholder="手机验证码" :maxLength="6">
				<button size="mini" class="text-orange text-style" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
			</m-input>
			<button type="primary" class="primary round" @tap="checkInfo" :loading="submitBtnDis">下一步</button>
		</view>
		<view class="input-group" v-if='basics == 1'>
			<m-input type="password" clearable v-model="params.password" placeholder="重置密码" :maxLength="11" :focus="true"></m-input>
			<m-input type="password" clearable v-model="params.rePassword" placeholder="确认密码" :maxLength="11"></m-input>
			<button type="primary" class="primary round" @tap="reset" :loading="submitBtnDis">确认</button>
		</view>
		<view class="input-group" v-if='basics == 2'>
			<view class="orderContent bg-white" v-if="basicsList[2].name == '成功'">
				<view class="info">
					<image class="orderSuc" src="/static/img/orderSuc.png" mode="widthFix"></image><br>
					<text class="text-xxl">重置密码成功</text><br>
					<text class="text-orange text-df" @tap="goPage('login')">去登录</text>
				</view>
			</view>
			<view class="orderContent bg-white" v-else>
				<view class="info">
					<image class="orderSuc" src="/static/img/error.png" mode="widthFix"></image><br>
					<text class="text-xxl">重置密码失败</text><br>
					<text class="text-df">{{errMsg}}</text><br>
					<text class="text-orange text-df" @tap="tryAgain">重新来过</text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex'
	import mInput from '@/components/new-my-input/new-my-input'
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'

	export default {
		components: {
			mInput
		},
		data() {
			return {
				
				basicsList: [{
					cuIcon: 'radioboxfill',
					name: '找回密码'
				},{
					cuIcon: 'roundcheckfill',
					name: '重置密码'
				}],
				basics: 0,
				btnDis: false,
				submitBtnDis: false,
				btnText: "发送验证码",
				params: {
					mobile: "",
					imgcode: "",
					password: "",
					rePassword: ""
				},
				reqBody: {},
				checked: false,
				errMsg: '重置密码失败',
				t: null,
				showSteps:false,
				stepsHeight:0,
				bgHeight:0,
				inputHeight:0,
				inputBoxTop:0
			}
		},
		onLoad(query) {
			this.initredirectRouteData(query);
			this.$refs.imageCode.getImgCode();
		},
		onShow(){
			let that=this
			this.$nextTick(function(){
				wx.createSelectorQuery().select('.login-page').boundingClientRect(function (rect){
					that.bgHeight=rect.height
					wx.createSelectorQuery().select('.in-box').boundingClientRect(function (rect){
						that.inputHeight=rect.height
						that.inputBoxTop=that.bgHeight - that.inputHeight*0.5
					}).exec()
				}).exec()
			})
			
		},
		computed: {
			...mapState(["openId"]),
			...mapGetters(['hasLogin'])
		},
		methods: {
			goPage(routeName) {
				let page = getCurrentPages()
				let redirecte = true
				if (page.length > 1) {
					console.log(page)
					if (page[page.length - 1].route.indexOf(routeName) !== -1) {
						redirecte = true
					} else {
						redirecte = false
					}
				} else {
					redirecte = false
				}
				if (redirecte) {
					this.$mRouter.back(-1)
				} else {
					this.$mRouter.push({
						route: this.$mRoutesConfig[routeName],
					})
				}
			},
			tryAgain(){
				this.params = {
					mobile: "",
					imgcode: "",
					password: "",
					rePassword: ""
				}
				/* this.basicsList[2]={
					cuIcon: 'roundcheckfill',
					name: '成功'
				} */
				this.showSteps=false
				this.btnText = "发送验证码"
				clearInterval(this.t);
				// this.BasicsSteps()
			},
			/* BasicsSteps() {
				this.basics = this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1
			}, */
			// 发送验证码
			async sendCode() {
				this.reqBody["mobile"] = this.params["mobile"];
				this.reqBody["code"] = this.params["imgcode"];
				let checkRes = graceChecker.check(this.reqBody, formRuleConfig.sendCodeRule);
				if (!checkRes) {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
					return;
				}
				await this.$apis.sendLoginCode({
					mobile: this.params.mobile,
					code: this.params.imgcode,
					type: "reset"
				});

				uni.showToast({
					title: '发送成功,请查收'
				});
				// 开启倒计时
				this.countDown();
			},

			// 验证码倒计时
			countDown() {
				this.t = null;
				let timer = 60;
				this.btnDis = true;
				clearInterval(this.t);
				this.btnText = `${timer}s`;
				this.t = setInterval(() => {
					if (timer == 0) {
						clearInterval(this.t);
						this.btnText = "重新发送";
						this.btnDis = false;
						return;
					}
					timer--;
					this.btnText = `${timer}s`;
				}, 1000)
			},
			initredirectRouteData(query) {
				if (query.redirectUrl) {
					this.redirectRoute.path = query.redirectUrl;
					delete query.redirectUrl;
					this.routeQuery = query;
				}
			},
			// 找回密码第一步验证信息
			async checkInfo() {
				try {
					this.reqBody["mobile"] = this.params["mobile"];
					this.reqBody["code"] = this.params["code"];

					let checkRes = graceChecker.check(this.reqBody, formRuleConfig.forgetStep1Rule);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// 校验通过...
					this.submitBtnDis = true
					let userInfo = await this.$apis.judgeCode(this.reqBody);
					this.submitBtnDis = false
					// this.BasicsSteps()
					this.showSteps=true
				} catch (e) {
					this.submitBtnDis = false;
				}
			},
			async reset() {
				try {
					let info = {}
					info["mobile"] = this.params["mobile"];
					info["password"] = this.params["password"];
					info["rePassword"] = this.params["rePassword"];
					let checkRes = graceChecker.check(info, [{
							name: "mobile",
							checkType: "mobile",
							checkRule: "",
							errorMsg: "手机号格式不正确"
						}, {
							name: "password",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入密码"
						},
						{
							name: "rePassword",
							checkType: "notnull",
							checkRule: "",
							errorMsg: "请输入确认密码"
						},
						{
							name: "rePassword",
							checkType: "same",
							checkRule: info["password"],
							errorMsg: "两次输入密码不同，请重新输入"
						}
					]);
					if (!checkRes) {
						uni.showToast({
							title: graceChecker.error,
							icon: "none"
						});
						return;
					}
					// 校验通过...
					this.submitBtnDis = true
					let userInfo = await this.$apis.resetPwd({
						mobile: this.params.mobile,
						password: this.params.password
					});
					this.submitBtnDis = false
					this.goPage('login')
					// this.BasicsSteps()
				} catch (e) {
					this.errMsg = e
					uni.showToast({
						title:this.erMsg,
						icon:"none"
					})
					setTimeout(()=>{
						this.tryAgain()
					},2000)
					    // this.BasicsSteps()
					    // this.basicsList[2].cuIcon = 'roundclosefill',
						// this.basicsList[2].name = '失败',
					this.submitBtnDis = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-page {
		height: 426rpx;
		position: relative;
		background-image: url("https://test.hrycf.com/hryxcx/forgetBg.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		text-align: center;
	}
	.steps{
		position: relative;
		width: 100%;
		display: flex;
		padding: 0 88rpx 0;
		justify-content: space-between;
		.bridge{
			width: calc(100% - 350rpx);
			height:5rpx ;
			background-color: #ffffff;
			position: absolute;
			left: 50%;
			top: 27rpx;
			transform: translate(-50%,0);
		}
		.pub{
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.s-o-num{
				width:54rpx ;
				height: 54rpx;
				text-align: center;
				line-height: 54rpx;
				border-radius: 27rpx;
				background-color: #ffffff;
			}
			.s-o-title{
				padding-top: 24rpx;
				color:#ffffff;
				font-size: 26rpx;
			}
		}
	}
	.bg-white {
		background-color: #FFFFFF;
	}

	.step-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.cu-steps .cu-item [class*="cuIcon-"],
	.cu-steps .cu-item .num {
		line-height: 50rpx;
	}

	.cu-steps .cu-item:before,
	.cu-steps .cu-item:after,
	.cu-steps.steps-arrow .cu-item:before,
	.cu-steps.steps-arrow .cu-item:after {
		top: 25rpx;
	}

	.text-style {
		background: #FFFFFF;
	}

	button:after {
		border: none;
	}

	.input-group {
		width: 90%;
		// margin: 100rpx auto 0;
		// padding: 60rpx 0 115rpx;
		// background-color: #fff;
		// border-radius: 10upx;
		border-radius: 10rpx;
		text-align: center;
		position: absolute;
		left: 50%;
		transform: translate(-50%,0);
	
		image {
			width: 174rpx;
			margin: 50rpx auto;
			display: inline-block;
		}
        .i-g-phone{
			box-shadow: 10rpx 8rpx 15rpx rgba(50, 50, 50, 0.1);
		}
		.i-g-imgcode{
			margin-top: 40rpx;
			box-shadow: 10rpx 8rpx 15rpx rgba(50, 50, 50, 0.1);
		}
		.i-g-phonecode{
			margin-top: 40rpx;
			box-shadow: 10rpx 8rpx 15rpx rgba(50, 50, 50, 0.1);
		}
		.i-g-newpass{
				box-shadow: 10rpx 8rpx 15rpx rgba(50, 50, 50, 0.1);
		}
		.i-g-newpassok{
			margin-top: 40rpx;
			box-shadow: 10rpx 8rpx 15rpx rgba(50, 50, 50, 0.1);
		}
		.primary {
			background-color: #FF6A00;
			width: 100%;
			margin-top: 100rpx;
		}
	}

	.forget {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 80rpx;
		color: rgba(198, 198, 199, 1);
		text-align: right;
	}
	.text-df{
		line-height: 80rpx;
	}
</style>
